<template>
  <div class="space-y-6">
    <div class="flex justify-between items-center">
      <h2 class="text-2xl font-bold text-gray-900">工作进度计划</h2>
      <button @click="showAddModal = true" class="btn btn-primary">
        <i class="fas fa-plus mr-2"></i>新增计划
      </button>
    </div>

    <!-- 延期提醒 -->
    <div v-if="delayedOrders.length > 0" class="bg-red-50 border border-red-200 rounded-md p-4">
      <div class="flex">
        <i class="fas fa-exclamation-triangle text-red-400 mt-1"></i>
        <div class="ml-3">
          <h3 class="text-sm font-medium text-red-800">延期工单提醒</h3>
          <div class="mt-2 text-sm text-red-700">
            <p>发现 {{ delayedOrders.length }} 个延期工单，请及时处理：</p>
            <ul class="list-disc list-inside mt-1">
              <li v-for="order in delayedOrders" :key="order.id">
                {{ order.workOrder }} - {{ order.model }} (计划日期: {{ order.date }})
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 计划列表 -->
    <div class="card">
      <div class="overflow-x-auto">
        <table class="table">
          <thead>
            <tr>
              <th>机型</th>
              <th>工单号</th>
              <th>数量</th>
              <th>日期</th>
              <th>状态</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="plan in workPlans" :key="plan.id">
              <td>{{ plan.model }}</td>
              <td>{{ plan.workOrder }}</td>
              <td>{{ plan.quantity }}</td>
              <td>{{ plan.date }}</td>
              <td>
                <span :class="getStatusClass(plan.status)">
                  {{ getStatusText(plan.status) }}
                </span>
              </td>
              <td>{{ plan.notes || '-' }}</td>
              <td>
                <button @click="editPlan(plan)" class="text-blue-600 hover:text-blue-900 mr-2">
                  <i class="fas fa-edit"></i>
                </button>
                <button @click="deletePlan(plan)" class="text-red-600 hover:text-red-900">
                  <i class="fas fa-trash"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 新增/编辑模态框 -->
    <div v-if="showAddModal || showEditModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
      <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <h3 class="text-lg font-medium mb-4">{{ isEdit ? '编辑计划' : '新增计划' }}</h3>
        <form @submit.prevent="savePlan">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">机型</label>
            <input v-model="form.model" type="text" class="form-input" required>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">工单号</label>
            <input v-model="form.workOrder" type="text" class="form-input" required>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">数量</label>
            <input v-model.number="form.quantity" type="number" class="form-input" required min="1">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">日期</label>
            <input v-model="form.date" type="date" class="form-input" required>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">状态</label>
            <select v-model="form.status" class="form-input">
              <option value="pending">待处理</option>
              <option value="in-progress">进行中</option>
              <option value="completed">已完成</option>
              <option value="delayed">延期</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">备注</label>
            <textarea v-model="form.notes" class="form-input" rows="3"></textarea>
          </div>
          <div class="flex justify-end space-x-2">
            <button type="button" @click="closeModal" class="btn btn-secondary">取消</button>
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useDataStore } from '../stores'
import { showAlert, confirmDialog } from '../utils/notifications'
import type { WorkPlan } from '../types'

const store = useDataStore()
const workPlans = computed(() => store.workPlans)
const delayedOrders = computed(() => store.checkDelayedOrders())

const showAddModal = ref(false)
const showEditModal = ref(false)
const isEdit = ref(false)
const form = ref<WorkPlan>({
  model: '',
  workOrder: '',
  quantity: 0,
  date: '',
  notes: '',
  status: 'pending'
})

onMounted(() => {
  if (workPlans.value.length === 0) {
    store.initSampleData()
  }
})

function getStatusClass(status?: string) {
  const classes = {
    pending: 'bg-yellow-100 text-yellow-800',
    'in-progress': 'bg-blue-100 text-blue-800',
    completed: 'bg-green-100 text-green-800',
    delayed: 'bg-red-100 text-red-800'
  }
  return classes[status as keyof typeof classes] || 'bg-gray-100 text-gray-800'
}

function getStatusText(status?: string) {
  const texts = {
    pending: '待处理',
    'in-progress': '进行中',
    completed: '已完成',
    delayed: '延期'
  }
  return texts[status as keyof typeof texts] || '未知'
}

function editPlan(plan: WorkPlan) {
  form.value = { ...plan }
  isEdit.value = true
  showEditModal.value = true
}

async function deletePlan(plan: WorkPlan) {
  const confirmed = await confirmDialog(`确定要删除工单 ${plan.workOrder} 吗？`)
  if (confirmed) {
    const index = store.workPlans.findIndex(p => p.id === plan.id)
    if (index > -1) {
      store.workPlans.splice(index, 1)
      showAlert('删除成功', 'success')
    }
  }
}

function closeModal() {
  showAddModal.value = false
  showEditModal.value = false
  isEdit.value = false
  form.value = {
    model: '',
    workOrder: '',
    quantity: 0,
    date: '',
    notes: '',
    status: 'pending'
  }
}

function savePlan() {
  if (isEdit.value) {
    const index = store.workPlans.findIndex(p => p.id === form.value.id)
    if (index > -1) {
      store.workPlans[index] = { ...form.value }
      showAlert('更新成功', 'success')
    }
  } else {
    store.workPlans.push({
      ...form.value,
      id: Date.now().toString()
    })
    showAlert('添加成功', 'success')
  }
  closeModal()
}
</script>
